<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="rotographimg" :current="current" field="content">
			<swiper class="swiper-box" :current="0" @change="changeSwiper" :autoplay="true">
				<swiper-item v-for="(item, index) in rotographimg" :key="index">
					<view class="swiper-item">
						<image :src="imgPath(item.path)" mode="aspectFill" :draggable="false" />
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件 -->
		<uni-section title="工作台" titleFontSize="20" type="line"></uni-section>
		<view class="grid-body gridBox">
			<!-- 学生宫格 -->
			<uni-grid :column="4" :showBorder="false" v-show="isUser != 'Teacher'">
				<uni-grid-item>
					<view class="grid-item-box" @click="toApplyLeaveForm">
						<uni-icons type="wallet-filled" size="60rpx" color="#f47d34"></uni-icons>
						<text class="text">请假</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="toextendLeaveForm">
						<uni-icons type="color-filled" size="60rpx" color="#ddb230"></uni-icons>
						<text class="text">延假</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="toApplyEliminateForm">
						<uni-icons type="calendar-filled" size="60rpx" color="#19b4a4"></uni-icons>
						<text class="text">销假</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="handleSystemNotification">
						<uni-badge class="unibad" :text="this.Countmeal" absolute="rightTop" size="small">
							<uni-icons type="chatboxes-filled" size="60rpx" color="#3474f4"></uni-icons>
							<text class="text">通知</text>
						</uni-badge>
					</view>
				</uni-grid-item>
			</uni-grid>
			<!-- 教师宫格 -->
			<uni-grid :column="4" :showBorder="false" v-show="isUser == 'Teacher'">
				<uni-grid-item>
					<view class="grid-item-box" @click="toLeaveAudit">
						<uni-icons type="calendar-filled" size="60rpx" color="#f47d34"></uni-icons>
						<text class="text">请假审批</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="toStuElimimnate">
						<uni-icons type="checkbox-filled" size="60rpx" color="#19b4a4"></uni-icons>
						<text class="text">销假记录</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box" @click="handleSystemNotification">
						<uni-badge class="unibad" :text="this.Countmeal" absolute="rightTop" size="small">
							<uni-icons type="chatboxes-filled" size="60rpx" color="#3474f4"></uni-icons>
							<text class="text">通知</text>
						</uni-badge>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>

		<!-- 学生列表部分 -->
		<uni-section title="申请记录" titleFontSize="20" type="line" v-show="isUser != 'Teacher'"></uni-section>
		<view class="leaveList" v-show="isUser != 'Teacher'" lowerThreshold="20">
			<u-list height="46vh" lowerThreshold="20" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in applyLeave" :key="index">
					<view class="list" :class="getListClass(item.status)">
						<view class="left">
							<view>
								{{ item.parentLevelId ? "延假" : "请假" }}
							</view>
							<view>
								{{ item.duration / 10 }}天
								{{ formatLeaveType(item.leaveType) }}
							</view>
							<view>申请时间: {{ item.createTime }}</view>
							<view> {{ item.beginTime }} 至 {{ item.endTime }} </view>
						</view>
						<view class="right">
							<view>{{ formatLeaveAudit(item.status) }}</view>
							<view @click="isdelete(item.id)" v-if="item.status == 1">申请取消</view>
						</view>
					</view>
				</u-list-item>
				<view class="more">
					<view v-show="applyLeave.length < total">------ 上滑加载更多 ------</view>
					<view v-show="applyLeave.length == total">------ 已加载全部 ------</view>
				</view>
			</u-list>
		</view>

		<!-- 教师列表部分 -->
		<uni-section title="学生申请" titleFontSize="20" type="line" v-show="isUser == 'Teacher'"></uni-section>
		<view class="leaveList" v-show="isUser == 'Teacher'">
			<u-list height="46vh" lowerThreshold="20" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in applyLeave" :key="index">
					<view class="list" :class="getListClass(item.status)" @click="toLeaveAudit">
						<view class="left">
							<view>
								{{ item.stuName }}{{ item.parentLevelId ? "延假" : "请假" }}
							</view>
							<view>学号：{{ item.sno }}</view>
							<view>
								{{ item.duration / 10 }}天
								{{ formatLeaveType(item.leaveType) }}
							</view>
							<view> {{ item.beginTime }} 至 {{ item.endTime }} </view>
						</view>
						<view class="right">
							{{ formatLeaveAudit(item.status) }}
						</view>
					</view>
				</u-list-item>
				<view class="more">
					<view v-show="applyLeave.length < total">------ 上滑加载更多 ------</view>
					<view v-show="applyLeave.length == total">------ 已加载全部 ------</view>
				</view>
			</u-list>
		</view>
	</view>
</template>

<script>
	import {
		getUser,
		getLoginPeople
	} from "@/utils/auth";
	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		listNoticeAll,
		listAdminNoticeAll
	} from "@/api/client/notice.js";
	import {
		getStuLeaveList,
		getExtendLeave,
		getTeaApplyLeaveList,
		delApplyLeave,
	} from "@/api/client/leave";
	import {
		listResources
	} from "@/api/backend/fileResources";
	import config from '@/config'
	import "@/static/iconfont.css";

	export default {
		onShow() {
			// 获取请假类型字典
			getDicts("leave_types").then((response) => {
				this.LeaveTypesOptions = response.data.map((item) => {
					return {
						name: item.dictLabel,
						value: item.dictValue,
					};
				});
			});
			// 获取请假申请状态字典
			getDicts("leave_audit").then((response) => {
				this.LeaveAuditOptions = response.data.map((item) => {
					return {
						name: item.dictLabel,
						value: item.dictValue,
					};
				});
			});
			var ret = getLoginPeople();
			if (ret != "Teacher") {
				// 获取学生个人请假列表
				getStuLeaveList({
					pageNum: 1,
					pageSize: 3,
				}).then((res) => {
					this.applyLeave = res.rows;
					this.total = res.total;
				});
			} else {
				getTeaApplyLeaveList({
					pageNum: 1,
					pageSize: 3
				}).then((res) => {
					this.applyLeave = res.rows;
					this.total = res.total;
				});
			}
			// this.getinfo();
			this.createPage();
		},
		data() {
			return {
				user: getUser(),
				LeaveTypesOptions: [],
				LeaveAuditOptions: [],
				current: 0,
				swiperDotIndex: 0,
				Countmeal: 0,
				data: [{
						image: "/static/images/banner/banner01.jpg",
					},
					{
						image: "/static/images/banner/banner02.jpg",
					},
					{
						image: "/static/images/banner/banner03.jpg",
					},
				],
				applyLeave: [],
				// 样式控制
				listClassMap: {
					1: "list-one",
					2: "list-two",
					3: "list-three",
				},
				// 分页参数
				queryParams: {
					pageNum: 1,
					pageSize: 4,
					// stu: getUser().id
				},
				total: 0,
				isUser: null,
				rotographimg: [],
				rotographcount: null,
			};
		},
		created() {
			this.createPage();
		},
		methods: {
			//创建页面时初始化页面数据
			createPage() {
				var ret = getLoginPeople();
				this.isUser = getLoginPeople();
				this.user = getUser();
				if (ret == "Teacher") {
					this.name = this.user.userName;
					this.dpName = this.user.dept.deptName;
					this.getAdminInfo();
				} else {
					this.name = this.user.name;
					this.sno = this.user.sno;
					this.getUserinfo();
				}
				this.getrotograph();
				// this.setTime();
			},
			/** 获取轮播图 */
			getrotograph() {
				let data = {
					fileDataType: "appIndex"
				}
				listResources(data).then(response => {
					this.rotographimg = response.rows;
					this.rotographcount = response.total;
				});
			},
			imgPath(path) {
				return config.baseUrl + path;
			},
			// setTime() {
			// 	//每隔一分钟运行一次保存方法
			// 	this.timer = setInterval(() => {
			// 		this.getinfo();
			// 	}, 60000);
			// },
			getUserinfo() {
				let date = {
					status: 1,
				};
				listNoticeAll(date).then((response) => {
					this.Countmeal = response.total;
				});
			},
			getAdminInfo() {
				let date = {
					status: 1,
				};
				listAdminNoticeAll(date).then((response) => {
					this.Countmeal = response.total;
				});
			},
			handleSystemNotification(e) {
				uni.navigateTo({
					url: "/pages/mine/notification/index",
				});
			},
			clickBannerItem(item) {
				// console.info(item)
			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			toApplyLeaveForm(e) {
				uni.navigateTo({
					url: "/pages/leave/index",
				});
			},
			toextendLeaveForm(e) {
				getExtendLeave().then((res) => {
					if (res.data) {
						uni.navigateTo({
							url: "/pages/extendLeave/index",
						});
					} else {
						uni.$u.toast("您没有可延假的申请！");
					}
				});
			},
			toLeaveAudit(e) {
				uni.navigateTo({
					url: "/pages/leaveAudit/index",
				});
			},
			toStuElimimnate(e) {
				uni.navigateTo({
					url: "/pages/stuEliminateList/index",
				});
			},
			toApplyEliminateForm(e) {
				if (getUser().isAtSchool == 1) {
					uni.navigateTo({
						url: "/pages/eliminate/index",
					});
				} else {
					uni.$u.toast("您没有可销假的申请！");
				}
			},
			getListClass(status) {
				return this.listClassMap[status];
			},
			scrolltolower() {
				this.queryParams.pageSize = this.queryParams.pageSize + 3;
				if (this.isUser == "Teacher") {
					getTeaApplyLeaveList(this.queryParams).then((res) => {
						this.applyLeave = res.rows;
						this.total = res.total;
					});
				} else {
					getStuLeaveList(this.queryParams).then((res) => {
						this.applyLeave = res.rows;
						this.total = res.total;
					});
				}
			},
			formatLeaveType(type) {
				let result = "";
				this.LeaveTypesOptions.forEach((item) => {
					if (item.value == type) {
						result = item.name;
					}
				});
				return result;
			},
			formatLeaveAudit(type) {
				let result = "";
				this.LeaveAuditOptions.forEach((item) => {
					if (item.value == type) {
						result = item.name;
					}
				});
				return result;
			},
			isdelete(id) {
				let that = this;
				uni.showModal({
					title: "提示",
					content: "是否取消当前的假期申请？",
					success: function(res) {
						if (res.confirm) {
							delApplyLeave(id).then((res) => {
								if (res.code == 200) {
									getStuLeaveList(this.queryParams).then((res) => {
										that.applyLeave = res.rows;
										that.total = res.total;
									});
									uni.showToast({
										title: "取消成功",
										icon: "none",
										duration: 2000,
									});
								}
							});
						} else if (res.cancel) {}
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		// height: 90vh;
		height: auto;
		font-size: 20rpx;
		font-weight: bold;
	}

	.gridBox {
		width: auto;
		margin: 0 auto;
		height: auto;
	}

	view {
		line-height: inherit;
	}

	.text {
		text-align: center;
		margin-top: 10rpx;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
	}

	.unibad {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
	}

	.swiper {
		height: 300rpx;
	}

	.swiper-box {
		height: 300rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 300rpx;
		line-height: 300rpx;
	}

	@media screen and (min-width: 750rpx) {
		.uni-swiper-dot-box {
			width: 750rpx;
			margin: 0 auto;
			margin-top: 16rpx;
		}

		.image {
			width: 100%;
		}
	}

	.list-one {
		background: rgba(102, 157, 202, 0.637);

		.right {
			color: rgba(26, 75, 116, 0.637);
		}
	}

	.list-two {
		background: rgba(102, 202, 124, 0.637);

		.right {
			color: rgba(24, 117, 44, 0.637);
		}
	}

	.list-three {
		background: rgba(202, 102, 102, 0.637);

		.right {
			color: rgba(102, 16, 16, 0.637);
		}
	}

	.list {
		width: 708rpx;
		height: 200rpx;
		margin: 20rpx 22rpx 0 22rpx;
		padding: 0 20rpx 0 0;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
	}

	.more {
		width: 708rpx;
		height: 120rpx;
		margin: 10rpx 22rpx 0 22rpx;
		padding: 0 20rpx 0 0;
		color: rgb(116, 116, 116);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left {
		width: 600rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		padding-left: 20rpx;
		border-radius: 20rpx;
		background: rgba(236, 236, 241, 0.637);
	}

	.right {
		width: 108rpx;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		flex-direction: column;
	}

	.list-one {
		background: rgba(102, 157, 202, 0.637);
	}

	.list-two {
		background: rgba(102, 202, 124, 0.637);
	}

	.list-three {
		background: rgba(202, 102, 102, 0.637);
	}

	::-webkit-scrollbar {
		display: none;
	}
</style>